<!--<script setup>import {ref, onMounted} from 'vue'-->
<!--import axios from 'axios'-->

<!--const props = defineProps({-->
<!--  userId: {type: Number, required: true},-->
<!--  currentUserId: {type: Number, required: true}-->
<!--})-->

<!--const emit = defineEmits(['follow-status-changed'])-->

<!--// 关注状态-->
<!--const isFollowing = ref(false)-->
<!--const followLoading = ref(false)-->

<!--// 检查关注状态-->
<!--async function checkFollowStatus() {-->
<!--  if (!props.currentUserId || props.currentUserId === props.userId) {-->
<!--    isFollowing.value = false-->
<!--    return-->
<!--  }-->

<!--  try {-->
<!--    const res = await axios.get('http://localhost:8084/api/user/check', {-->
<!--      params: {-->
<!--        followerId: props.currentUserId,-->
<!--        followingId: props.userId-->
<!--      }-->
<!--    })-->
<!--    isFollowing.value = res.data-->
<!--  } catch (error) {-->
<!--    console.error('检查关注状态失败:', error)-->
<!--    isFollowing.value = false-->
<!--  }-->
<!--}-->

<!--// 关注操作-->
<!--async function followUser() {-->
<!--  if (followLoading.value || !props.currentUserId) return-->

<!--  followLoading.value = true-->
<!--  try {-->
<!--    const response = await axios.post('http://localhost:8084/api/user/follow', null, {-->
<!--      params: {-->
<!--        followerId: props.currentUserId,-->
<!--        followingId: props.userId-->
<!--      }-->
<!--    })-->

<!--    if (response.status === 200) {-->
<!--      isFollowing.value = true-->
<!--      emit('follow-status-changed')-->
<!--    } else if (response.status === 409) {-->
<!--      isFollowing.value = true-->
<!--    }-->
<!--  } catch (error) {-->
<!--    if (error.response && error.response.status === 409) {-->
<!--      isFollowing.value = true-->
<!--      console.log('已关注该用户')-->
<!--    } else {-->
<!--      console.error('关注失败:', error)-->
<!--    }-->
<!--  } finally {-->
<!--    followLoading.value = false-->
<!--  }-->
<!--}-->

<!--// 取消关注操作-->
<!--async function unfollowUser() {-->
<!--  if (followLoading.value || !props.currentUserId) return-->

<!--  followLoading.value = true-->
<!--  try {-->
<!--    await axios.post('http://localhost:8084/api/user/unfollow', null, {-->
<!--      params: {-->
<!--        followerId: props.currentUserId,-->
<!--        followingId: props.userId-->
<!--      }-->
<!--    })-->
<!--    isFollowing.value = false-->
<!--    emit('follow-status-changed')-->
<!--  } catch (error) {-->
<!--    console.error('取消关注失败:', error)-->
<!--    await checkFollowStatus()-->
<!--  } finally {-->
<!--    followLoading.value = false-->
<!--  }-->
<!--}-->

<!--// 处理点击事件-->
<!--function handleClick() {-->
<!--  if (isFollowing.value) {-->
<!--    unfollowUser()-->
<!--  } else {-->
<!--    followUser()-->
<!--  }-->
<!--}-->

<!--// 页面加载时检查关注状态-->
<!--onMounted(async () => {-->
<!--  await checkFollowStatus()-->
<!--})-->
<!--</script>-->

<!--<template>-->
<!--  <div class="follow-section">-->
<!--    <button-->
<!--        v-if="!isFollowing"-->
<!--        @click="handleClick"-->
<!--        :disabled="followLoading"-->
<!--        class="follow-btn"-->
<!--    >-->
<!--      {{ followLoading ? '关注中...' : '关注' }}-->
<!--    </button>-->
<!--    <button-->
<!--        v-else-->
<!--        @click="handleClick"-->
<!--        :disabled="followLoading"-->
<!--        class="unfollow-btn"-->
<!--    >-->
<!--      {{ followLoading ? '取消中...' : '已关注' }}-->
<!--    </button>-->
<!--  </div>-->
<!--</template>-->

<!--<style scoped>-->
<!--.follow-section {-->
<!--  margin-left: auto;-->
<!--}-->

<!--.follow-btn {-->
<!--  background: #3498db;-->
<!--  color: white;-->
<!--  border: none;-->
<!--  border-radius: 4px;-->
<!--  padding: 8px 16px;-->
<!--  cursor: pointer;-->
<!--  font-size: 14px;-->
<!--}-->

<!--.follow-btn:hover:not(:disabled) {-->
<!--  background: #2980b9;-->
<!--}-->

<!--.follow-btn:disabled {-->
<!--  opacity: 0.6;-->
<!--  cursor: not-allowed;-->
<!--}-->

<!--.unfollow-btn {-->
<!--  background: #ecf0f1;-->
<!--  color: #7f8c8d;-->
<!--  border: 1px solid #bdc3c7;-->
<!--  border-radius: 4px;-->
<!--  padding: 8px 16px;-->
<!--  cursor: pointer;-->
<!--  font-size: 14px;-->
<!--}-->

<!--.unfollow-btn:hover:not(:disabled) {-->
<!--  background: #d5dbdb;-->
<!--  color: #34495e;-->
<!--}-->

<!--.unfollow-btn:disabled {-->
<!--  opacity: 0.6;-->
<!--  cursor: not-allowed;-->
<!--}-->
<!--</style>-->
